<template>
  <div class="uploader">
    <div class="uploader_content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文件上传">
          <el-col :span="9.5"
            ><el-upload
              ref="upload"
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :show-file-list="true"
              v-loading="form.loading === 'uploading'"
              element-loading-text="上传中,请等待......"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              style="width: 100%"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="form.fileList"
              list-type="picture"
              :on-progress="progress"
              :on-success="success"
              :on-error='error'
              :before-upload='before'
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <!-- <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div> -->
              <el-button
                v-if="form.loading === 'uploading'"
                type="danger"
                size="mini"
                style="
                  position: absolute;
                  top: 22px;
                  left: 22px;
                  z-index: 99999999;
                "
                @click.stop="cacle"
                >取消上传</el-button
              >
            </el-upload></el-col
          >
        </el-form-item>
        <el-form-item label="上传进度">
          <el-col :span="17">
            <el-progress
              :percentage="form.percentage"
              style="margin-top: 10px"
            ></el-progress>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        percentage: 0,
        loading: "",
        load: true,
        fileList:[]
      },
    };
  },
  methods: {
    progress(event, file, fileList) {
      this.form.percentage = Math.round(file.percentage);
      this.form.loading = file.status;
      //   console.log(event, "event");
      //   console.log(file, "file");
      console.log(fileList);
      // console.log(file,'file')    以下为获取的信息
      // file.name    获取到上传的文件名称
      // file.percentage    上传进度
      // file.size  上传文件大小
      // file.status  上传中  uploading
      // file.raw.type  image/jpeg  上传格式类型

      //   console.log(fileList,'fileList')  上传成功列表的长度
    },
    cacle() {
      this.$refs.upload.abort();
      this.form.percentage = 0;
      this.form.loading = "";
    //   this.form.fileList.pop();
    //   console.log(this.form.fileList,'1111111111')
    },
    success(response, file, fileList) {
      this.form.percentage = file.percentage;
      this.form.fileList=fileList
      this.$message({
        type: "success",
        message: "上传图片成功",
      });
    //   console.log(response, "response");
    //   console.log(file, "file");
    //   console.log(fileList, "fileList");
    },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      error(err, file, fileList){
          this.$message.error({
              message:  `上传失败(${err.type})`
          })
          this.form.percentage=0
          this.form.loading = "";
          console.log(err,'err')
          console.log(file,'file')
          console.log(fileList,'fileList')
      },
      before(file){
          const arr=["image/jpeg"]
          console.log(file.type)
          if(arr.indexOf(file.type)===-1){
            this.$message.error('格式不对')
              return false
          }
      }
  },
};
</script>

<style scoped>
.uploader {
  padding: 20px 10px;
  box-sizing: border-box;
  background: #f0f0f0;
}
.uploader_content {
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #999;
  background: #ffffff;
}
</style>